Controlling the style of your widgets using the following:
Video Tutorial:
In [1]:
from IPython.html import widgets
import re
In [2]:
container = widgets.ContainerWidget()
widget_1 = widgets.TextWidget(description="Username: ")
widget_2 = widgets.ButtonWidget(description="Hide")
widget_3 = widgets.ButtonWidget(description="Show")
container.children = (widget_1, widget_2, widget_3)
def hide_user(widget):
widget_1.visible = False
def show_user(widget):
widget_1.visible = True
widget_2.on_click(hide_user)
widget_3.on_click(show_user)
container
In [3]:
container = widgets.ContainerWidget()
widget_1 = widgets.TextWidget(description="Name")
widget_2 = widgets.TextWidget(description="Email")
container.children = (widget_1, widget_2)
def check_email(name, old, new):
new_check = re.match(r"[^@]+@[^@]+\.[^@]+", new)
old_check = re.match(r"[^@]+@[^@]+\.[^@]+", old)
if new_check <> old_check:
style_email()
def style_email(*args):
new_check = re.match(r"[^@]+@[^@]+\.[^@]+", widget_2.value)
if new_check:
widget_2.set_css("color", "#228822")
widget_2.set_css("background-color", "#fff")
widget_2.set_css("font-weight", "400")
else:
widget_2.set_css("color", "#ff0000")
widget_2.set_css("background-color", "#ffbbbb")
widget_2.set_css("font-weight", "800")
widget_2.on_trait_change(check_email, "value")
widget_2.on_displayed(style_email)
container
You can define your own CSS calsses or use the Bootstrap library that is available
We will add a list of buttons
In [4]:
container = widgets.ContainerWidget()
widget_1 = widgets.ButtonWidget(description="btn-default")
widget_2 = widgets.ButtonWidget(description="btn-primary")
widget_3 = widgets.ButtonWidget(description="btn-success")
widget_4 = widgets.ButtonWidget(description="btn-info")
widget_5 = widgets.ButtonWidget(description="btn-warning")
widget_6 = widgets.ButtonWidget(description="btn-danger")
widget_7 = widgets.ButtonWidget(description="btn-link")
container.children = (widget_1, widget_2, widget_3, widget_4, widget_5,
widget_6, widget_7)
container
In [5]:
# Works for already displayed widgets
widget_1.add_class("btn-default")
widget_2.add_class("btn-primary")
widget_3.add_class("btn-success")
widget_4.add_class("btn-info")
widget_5.add_class("btn-warning")
widget_6.add_class("btn-danger")
widget_7.add_class("btn-link")
In [6]:
container = widgets.ContainerWidget()
widget_1 = widgets.TextWidget(description="Name")
widget_2 = widgets.ButtonWidget(description="btn-block")
container.children = (widget_1, widget_2)
container
In [7]:
# Works for already displayed widgets
widget_2.add_class("btn-primary")
widget_2.add_class("btn-block")
In [8]:
%%html
<span class="label label-default">Default</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
In [9]:
html_code = """
<span class="label label-default">Default</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
"""
container = widgets.ContainerWidget()
widget_1 = widgets.HTMLWidget(value = html_code)
container.children = (widget_1,)
container
In [10]:
%%html
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<strong>Calss: </strong>alert-success
</div>
<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<strong>Calss: </strong>alert-info
</div>
<div class="alert alert-warning" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<strong>Calss: </strong>alert-warning
</div>
<div class="alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<strong>Calss: </strong>alert-danger
</div>
In [11]:
container = widgets.ContainerWidget()
alert_code = """
<div class="alert alert-{type} alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<strong>{title}: </strong>{message}
</div>
"""
widget_1 = widgets.HTMLWidget()
widget_2 = widgets.TextWidget(description="Name")
widget_3 = widgets.ButtonWidget(description="Save")
def save_form(widget):
widget_1.value = alert_code.format(type="success",
title="Saved",
message="Your form has been saved",
)
widget_3.on_click(save_form)
container.children = (widget_1, widget_2, widget_3)
container